<template>
    <div>
        <div @click="clickDeleteDuplicate" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <Apps/>
            </n-icon>
            <Handle id="deleteDuplicate-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
        </div>
        <span>数据表</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    <div><span>数据表</span></div>
                    <br>

                </template>
                <div>
                        <span>
                            <n-select
                                style="width: 200px"
                                :options="viewsFieldType"
                                placeholder="选中列"
                                @update:value="handleUpdateValue"
                            />
                        </span>

                    <span>字段类型 : {{ fieldType }}</span>
                </div>
                <!--展示数据-->
                <n-data-table
                    :columns="props.data.data.title"
                    :data="props.data.data.data"
                    :pagination="pagination"
                    :key="(row) => row.key"
                    :on-update:page="handlePageChange"
                />
                <template #footer>
                    <a ref="dowA" :href="dowUrl"></a>
                    <n-button @click="save">下载XLSX表</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {Apps} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import {useClone} from "@/hooks/clone";
import {NInput} from "naive-ui";
import workApi from "@/http/workApi";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
const clone = useClone()
const clickDeleteDuplicate = () => {
    active.value = true
    getSuperiorData()
}
// 抽屉
const active = ref(false)
const fieldType = ref(null)
const viewsFieldType = computed(() => {
    let array = []
    let typeEnum = {
        int: "整数",
        float: "小数",
        date: "日期",
        str: "文本",
    }
    for (let i of props.data.data.title) {
        array.push({label: i.title, value: i.key, type: typeEnum[i.type]})
    }
    return array
})

function handleUpdateValue(value, option) {
    console.log(value)
    fieldType.value = option.type
}

// 双击编辑
const ShowOrEdit = defineComponent({
    props: {
        value: [String, Number],
        onUpdateValue: [Function, Array]
    },
    setup(props) {
        const isEdit = ref(false)
        const inputRef = ref(null)
        const inputValue = ref(props.value)

        function handleOnClick() {
            isEdit.value = true
            nextTick(() => {
                inputRef.value.focus()
            })
        }

        function handleChange() {
            props.onUpdateValue(inputValue.value)
            isEdit.value = false
        }

        return () =>
            h(
                'div',
                {
                    style: 'min-height: 22px',
                    onClick: handleOnClick
                },
                isEdit.value
                    ? h(NInput, {
                        ref: inputRef,
                        style: {width: "100px"},
                        value: inputValue.value,
                        onUpdateValue: (v) => {
                            inputValue.value = v
                        },
                        onChange: handleChange,
                        onBlur: handleChange
                    })
                    : props.value
            )
    }
})
const getDataIndex = (key) => {
    return props.data.data.data.findIndex((item) => item.key === key)
}
const handlePageChange = (curPage) => {
    page.value = curPage
}
const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    console.log(props.data.data.title)
                    let dataKey = 0
                    props.data.data.data.map(s => {
                        s.key = dataKey++
                    })

                    return
                }
            }
        }
    }
}
console.log(props.data.data)
const dowA = ref(null)
const dowUrl = ref("")

function save() {
    workApi.post("perform_tasks/download_table", {
        data: props.data.data
    }).then(r => {
        dowUrl.value = r.data.file_url
        console.log(dowA.value)
        setTimeout(()=>{
            dowA.value.click()
        },1)
    })
}

// 单页数据量
const page = ref(1)
const pagination = computed(() => ({
    pageSize: 10,
    page: page.value
}))
</script>

<style scoped lang="less">

</style>